<template>
    <!-- 融资列表   -->
    <div class="interestCalculationDetailsPage">
        <div class="search-wrap d-flex a-center">

            <div class="search-item d-flex a-center m-l20">
                <label>借款单位</label>
                <el-select class="m-l10" v-model="form.creditor" clearable>
                    <el-option v-for="(item,index) in companyList" :key="index" :label="item.companyName" :value="item.companyId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>贷款银行</label>
                <el-select class="m-l10" v-model="form.institutionId" clearable>
                    <el-option v-for="(item,index) in bankList" :key="index" :label="item.institutionName" :value="item.institutionId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>担保类型</label>
                <el-select class="m-l10" v-model="form.guaranteeType" clearable>
                    <el-option label="信用" value="1"></el-option>
                    <el-option label="担保" value="2"></el-option>
                    <el-option label="抵押" value="3"></el-option>
                    <el-option label="质押" value="4"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
                <el-button
                    @click="addHandle"
                    class="button_edit m-r10"
                >
                    新增融资信息
                </el-button>
                <el-button class="button_edit" @click="onExport">
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                index
                :indexWidth="'100'"
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
        >
            <template #loanContractNumber="scope">
                <span
                    style="color: #fc7037;cursor: pointer;"
                    @click="getInfo(scope.row)"
                >{{scope.row.loanContractNumber}}</span>
            </template>
            <template #drawAmounts="scope">
                <span
                    style="color: #fc7037;cursor: pointer;"
                    @click="toExtractDetails(scope.row)"
                >{{scope.row.drawAmounts}}</span>
            </template>
            <template #repaymentAmounts="scope">
                <span
                    style="color: #fc7037;cursor: pointer;"
                    @click="toRepaymentDetails(scope.row)"
                >{{scope.row.repaymentAmounts}}</span>
            </template>
        </public-table>
    </div>
    <!-- 新增融资信息   -->
    <public-dialog
        :title="'新增融资信息'"
        :width="'60%'"
        :confirmButtonTitle="'确认'"
        v-model:visible="visible"
        @onConfirm="onConfirm"
    >
        <div class="public-dialog-content d-flex flex-column">
            <el-form
               ref="financingFormRef"
               :model="financingForm"
               :rules="financingRules"
               label-width="150"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="借款单位" prop="companyId">
                            <el-select v-model="financingForm.companyId">
                                <el-option v-for="(item,index) in companyList" :key="index" :label="item.companyName" :value="item.companyId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="金融机构" prop="institutionId">
                            <el-select v-model="financingForm.institutionId">
                                <el-option v-for="(item,index) in bankList" :key="index" :label="item.institutionName" :value="item.institutionId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="授信金额" prop="creditAmount">
                            <el-input
                                style="width: 208px;"
                                v-model="financingForm.creditAmount"
                                placeholder="请输入授信金额"
                                @input="financingForm.creditAmount = limitInputNum(financingForm.creditAmount,7,0,false)"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="期限" prop="timeLimit">
                            <el-input
                                style="width: 208px;"
                                v-model="financingForm.timeLimit"
                                placeholder="请输入期限"
                                @input="financingForm.timeLimit = limitInputNum(financingForm.timeLimit,6,0,false)"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="借款合同编号" prop="loanContractNumber">
                            <el-input style="width: 208px;" v-model="financingForm.loanContractNumber" placeholder="请输入借款合同编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="担保类型" prop="guaranteeType">
                            <el-select v-model="financingForm.guaranteeType" clearable>
                                <el-option label="信用" value="1"></el-option>
                                <el-option label="担保" value="2"></el-option>
                                <el-option label="抵押" value="3"></el-option>
                                <el-option label="质押" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="授信时间" prop="creditTime">
                            <el-date-picker
                                style="width: 208px;"
                                v-model="financingForm.creditTime"
                                type="date"
                                placeholder="请选择授信时间"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年初贷款金额数" prop="previousLoanAmount">
                            <el-input
                                placeholder="请输入年初贷款金额数"
                                style="width: 208px;"
                                v-model="financingForm.previousLoanAmount"
                                @input="financingForm.previousLoanAmount = limitInputNum(previousLoanAmount.previousLoanAmount,6,0,false)"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="贷款用途" prop="purpose">
                            <el-input
                                placeholder="请输入贷款用途"
                                style="width: 208px;"
                                v-model="financingForm.purpose"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"></el-col>
                </el-row>
                <el-form-item label="备注" prop="remark">
                    <el-input
                        v-model="financingForm.remark"
                        :rows="4"
                        type="textarea"
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>
    </public-dialog>

    <!--  借款合同融资信息表  -->
    <public-dialog
        :title="'借款合同融资信息表'"
        :width="'60%'"
        :confirmButtonTitle="'确认'"
        v-model:visible="visible2"
        @onConfirm="visible2 = false"
    >
        <div class="public-dialog-content d-flex flex-column">
            <el-form
                label-width="150"
            >
                <label class="m-b20" style="color: #8c8e91 !important;">融资信息</label>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="借款单位">
                           <el-input disabled :placeholder="financingInfo.companyName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="金融机构">
                            <el-input disabled :placeholder="financingInfo.institutionName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="期限">
                            <el-input disabled :placeholder="financingInfo.timeLimit+'年'"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="担保方式">
                            <el-input disabled :placeholder="['','信用','担保','抵押','质押'][financingInfo.guaranteeType] || '-'"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="贷款用途">
                            <el-input disabled :placeholder="financingInfo.purpose"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="授信时间">
                            <el-input disabled :placeholder="financingInfo.creditTime"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
               <el-divider/>
               <label class="m-b20" style="color: #8c8e91;">提取明细表</label>
               <public-table
                    class="m-t20"
                    :is-paging="false"
                    :index="false"
                    border
                    :header-cell-style="{'background':'#f7f7fa'}"
                    :tableData="financingInfo.list"
                    :tableOption.sync="financingInfo_tableOption"/>
            </el-form>
        </div>
    </public-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
    ElSelect,
    ElOption,
    ElDivider,
    ElForm,
    ElFormItem,
    ElRow,
    ElCol,
    ElDatePicker,
    ElMessage
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";

import {tableCommonFun} from "@/hooks/tableCommon";
import {companyApi, financingApi} from "@/api/businessFinance";
import PublicDialog from "@/components/PublicDialog.vue";
import {limitInputNum, resetForm} from "@/common/utils/GlobalUtils";
import {useRouter} from "vue-router";

const router = useRouter();

const interfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'financingApi.getPageList',
});
const exportConfig = reactive({
    fileName:'businessFinance',
    apiPath:'exportApi.bankCreditAmountVoLeadingOut',
    tableName:'融资台账表'
});
const {
    form,
    page,
    tableOption,
    tableData,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport
}  = tableCommonFun(interfaceConfig,exportConfig);

form.value = {
    companyId:'',
    institutionId:'',
    guaranteeType:''
}

tableOption.value = [
  { label: "借款单位 ", prop: "companyName", minWidth: 100 },
  { label: "贷款银行 ", prop: "institutionName", minWidth: 100 },
  { label: "授信时间 ", prop: "creditTime", minWidth: 100 },
  { label: "借款合同号 ", prop: "loanContractNumber", minWidth: 120, slot: true },
  { label: "贷款用途 ", prop: "purpose", minWidth: 100 },
  { label: "期限(年) ", prop: "timeLimit", minWidth: 80 },
  { label: "年初贷款数 ", prop: "previousLoanAmount", minWidth: 100 },
  { label: "授信金额 ", prop: "creditAmount", minWidth: 100 },
  { label: "贷款余额 ", prop: "loanBalance", minWidth: 100 },
  { label: "已提取总金额 ", prop: "drawAmounts", width: 120, slot: true },
  { label: "已还款总金额 ", prop: "repaymentAmounts", minWidth: 120, slot: true },
  { label: "已计提利息总金额 ", prop: "interestAmounts", minWidth: 140 },
  { label: "较年初增减 ", prop: "increaseAndDecrease", minWidth: 120 },
  {
    label: "贷款抵押担保 ", prop: "guaranteeType", minWidth: 120, formatter: (val, row) => {
      return ['', '信用', '担保', '抵押', '质押'][val] || '-';
    }
  },
];

const financingInfo_tableOption = ref([
    { label: "提取时间 ", prop: "drawTime" },
    { label: "提取金额 ", prop: "drawAmount" },
    { label: "当前利率 ", prop: "currentInterestRate" },
    { label: "计划时间 ", prop: "plannedRepaymentTime" },
    { label: "还款时间 ", prop: "repaymentTime" },
    { label: "还款金额 ", prop: "repaymentAmount" },
    { label: "现行利率 ", prop: "loanInterestRate" },
    { label: "贷款余额 ", prop: "loanBalance" },
]);

const financingForm = reactive({
    companyId: '',
    institutionId: '',
    creditAmount: '',
    timeLimit: '',
    loanContractNumber: '',
    guaranteeType: '',
    creditTime: '',
    previousLoanAmount: '',
    remark: '',
    purpose:''
});

const financingRules = reactive({
    companyId: [
        { required: true, message: '请选择公司', trigger: 'change' },
    ],
    institutionId: [
        { required: true, message: '请选择金融机构', trigger: 'change' },
    ],
    creditAmount: [
        { required: true, message: '请输入授信金额', trigger: 'blur' },
    ],
    timeLimit: [
        { required: true, message: '请输入期限', trigger: 'change' },
    ],
    loanContractNumber: [
        { required: true, message: '请选择借款合同', trigger: 'blur' },
    ],
    guaranteeType: [
        { required: true, message: '请选择担保类型', trigger: 'change' },
    ],
    creditTime: [
        { required: true, message: '请选择授信时间', trigger: 'change' },
    ],
    previousLoanAmount: [
        { required: true, message: '请输入年初贷款金额数', trigger: 'blur' },
    ],
    remark: [
        { required: true, message: '请输入备注', trigger: 'blur' },
    ],
    purpose: [
        { required: true, message: '请输入贷款用途', trigger: 'blur' },
    ],
});

const companyList = ref([]);
/**
 * 查公司列表
 */
const getCompanyList = () => {
    companyApi.getList({}).then(res=>{
        companyList.value = res.data;
    });
}

/**
 * 获取银行信息
 *
 */
const bankList = ref([]);
const getFinancialInstitution = () => {
    financingApi.getFinancialInstitution().then(res=>{
        bankList.value = res.data;
    });
}

/**
 * 新增融资信息按钮
 *
 */
const visible = ref(false);
const addHandle = () => {
    visible.value = true;
}

/**
 * 新增融资信息
 */
const addBankCreditAmount = (param,callback) => {
    financingApi.addBankCreditAmount(param).then(res=>{
        if(res.code === '200'){
            if(callback)callback(res);
        }
    })
}

/**
 * 新增融资信息确认
 *
 */
const financingFormRef = ref(null);
const onConfirm = () => {
    financingFormRef.value.validate((valid, fields) => {
        if (valid) {
            addBankCreditAmount(financingForm,()=>{
                ElMessage.success('新增成功!');
                visible.value = false;
                resetForm(financingForm);
                getData({
                    pageNum:1,
                    pageSize:10
                });
            });
        } else {
            console.log('error submit!', fields)
        }
    })
}

/**
 * 跳转提取明细
 * @param row
 */
const toExtractDetails = (row) => {
    router.push({path:`/businessFinance/bankManagement/financingLedger/extractDetails/${row.creditId}`});
}

/**
 * 跳转还款明细
 * @param row
 */
const toRepaymentDetails = (row) => {
    router.push({path:`/businessFinance/bankManagement/financingLedger/repaymentDetails/${row.creditId}`});
}

/**
 * 查看借款合同融资信息表
 */
const visible2 = ref(false);
const financingInfo = ref({});
const getInfo = (row) => {
    financingApi.getLoanContractFinancingInformation({
        creditId:row.creditId
    }).then(res=>{
        financingInfo.value = res.data;
        visible2.value = true;
    });
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:10
    });
    getCompanyList();
    getFinancialInstitution();
});
</script>

<style lang="scss" scoped>
.interestCalculationDetailsPage{
    .el-input-width{
        width: 243px !important;
    }
  .search-wrap{
    .search-item{

      .el-input{
        width: 243px !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .dialog-title-box{
    height: 30px;
    span{
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>
